<script setup lang="ts">
import {login} from "@/api/login.ts"
import { reactive, ref } from "vue"
import type { FormInstance, FormRules } from 'element-plus'
import { useRouter } from "vue-router";
const router = useRouter()

const form = reactive({
    account: "admin",
    password: "root"
})
const regiter = reactive({
    account: "",
    password: ""
})
const dialogVisible = ref(false)

const ruleFormRef = {}

const userLogin = async () => {
    if(form.account&&form.password){
       const res = await login(form)
       console.log(res)
       if(res.code === 200){
        router.push("/home")
       }
    }
    // console.log(ruleFormRef);
}
const register = () => {
    dialogVisible.value = true
}
const confirmRegister = ()=>{
    if(regiter.account && regiter.password){
        dialogVisible.value = false
    }
}
</script>

<template>
    <div class="common-layout">
        <el-container style="height: 100vh;">
            <el-header style="line-height: 60px;font-weight: bold;">请登录</el-header>
            <el-main style="width:30%;margin:0 auto;height: calc(100% - 60px);padding-top: 100px;">
                <el-form ref="ruleFormRef" :model="form" label-width="120px">
                    <el-form-item label="账号">
                        <el-input v-model="form.account" />
                    </el-form-item>
                    <el-form-item label="密码">
                        <el-input type="password" v-model="form.password" />
                    </el-form-item>
                </el-form>
                <el-button @click="userLogin(ruleFormRef)">登录</el-button>
                <el-button @click="register(ruleFormRef)">注册</el-button>
            </el-main>
        </el-container>
    </div>


    <el-dialog v-model="dialogVisible" title="注册" width="30%">
        <el-form ref="ruleFormRef" :model="form" label-width="120px">
            <el-form-item label="账号">
                <el-input v-model="regiter.account" />
            </el-form-item>
            <el-form-item label="密码">
                <el-input v-model="regiter.password" />
            </el-form-item>
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="dialogVisible = false">取消</el-button>
                <el-button type="primary" @click="confirmRegister">确定</el-button>
            </span>
        </template>
    </el-dialog>
</template>

<style scoped>

</style>
